<template>
    <div v-transfer-dom>
      <popup v-model="showRight" position="right" @on-hide="close" width="80%">
        <div id="filterPlatformBox">
          <div class="platformBox">
            <h3>平台类别</h3>
            <div id="platformClassContent" class="fliterRow1">
              <checker v-model="typeId" type="radio" default-item-class="itemBox vux-1px" selected-item-class="active">
                <checker-item value="">全部</checker-item>

                <h3>A</h3>
                <checker-item value="爱钱进">爱钱进</checker-item>

                <h3>B</h3>
                <checker-item value="博金贷">博金贷</checker-item>

                <h3>D</h3>
                <checker-item value="道口贷">道口贷</checker-item>
                <checker-item value="点融">短融网</checker-item>
                <checker-item value="东方汇">东方汇</checker-item>
                <checker-item value="点融网" style="margin:0.2933rem 0">点融网</checker-item>

                <h3>E</h3>
                <checker-item value="e路同心">e路同心</checker-item>
                <checker-item value="e融所">e融所</checker-item>

                <h3>G</h3>
                <checker-item value="广金金服">广金金服</checker-item>
                <checker-item value="广信贷">广信贷</checker-item>
                <checker-item value="广州e贷">广州e贷</checker-item>

                <h3>H</h3>
                <checker-item value="海融易">海融易</checker-item>
                <checker-item value="合众e贷">合众e贷</checker-item>
                <checker-item value="和信贷">和信贷</checker-item>
                <checker-item value="红岭创投" style="margin:0.2933rem 0">红岭创投</checker-item>
                <checker-item value="惠投无忧">惠投无忧</checker-item>

                <h3>J</h3>
                <checker-item value="积木盒子">积木盒子</checker-item>
                <checker-item value="嘉石榴">嘉石榴</checker-item>
                <checker-item value="金开贷">金开贷</checker-item>
                <checker-item value="金投行" style="margin:0.2933rem 0">金投行</checker-item>

                <h3>K</h3>
                <checker-item value="开鑫贷">开鑫贷</checker-item>
                <checker-item value="口袋理财">口袋理财</checker-item>

                <h3>L</h3>
                <checker-item value="捞财宝">捞财宝</checker-item>
                <checker-item value="理财农场">理财农场</checker-item>
                <checker-item value="链链金融">链链金融</checker-item>
                <checker-item value="陆金服" style="margin:0.2933rem 0">陆金服</checker-item>

                <h3>M</h3>
                <checker-item value="麻袋财富">麻袋财富</checker-item>
                <checker-item value="米庄理财">米庄理财</checker-item>
                <checker-item value="民贷天下">民贷天下</checker-item>

                <h3>N</h3>
                <checker-item value="你我贷<">你我贷</checker-item>

                <h3>P</h3>
                <checker-item value="拍拍贷">拍拍贷</checker-item>
                <checker-item value="鹏金所">鹏金所</checker-item>
                <checker-item value="你我贷">你我贷</checker-item>
                <checker-item value="PPmoney网贷" style="margin:0.2933rem 0">PPmoney网贷</checker-item>

                <h3>Q</h3>
                <checker-item value="奇乐融">奇乐融</checker-item>

                <h3>R</h3>
                <checker-item value="人人贷">人人贷</checker-item>
                <checker-item value="人人聚财">人人聚财</checker-item>

                <h3>S</h3>
                <checker-item value="杉易贷">杉易贷</checker-item>
                <checker-item value="生菜金融">生菜金融</checker-item>
                <checker-item value="石投金融">石投金融</checker-item>
                <checker-item value="首金网" style="margin:0.2933rem 0">首金网</checker-item>
                <checker-item value="首E家">首E家</checker-item>
                <checker-item value="搜易贷">搜易贷</checker-item>

                <h3>T</h3>
                <checker-item value="投哪网">投哪网</checker-item>
                <checker-item value="团贷网">团贷网</checker-item>

                <h3>W</h3>
                <checker-item value="万盈金融">万盈金融</checker-item>
                <checker-item value="网利宝">网利宝</checker-item>
                <checker-item value="微贷网">微贷网</checker-item>

                <h3>X</h3>
                <checker-item value="向上金服">向上金服</checker-item>
                <checker-item value="小赢网金">小赢网金</checker-item>
                <checker-item value="信用宝">信用宝</checker-item>

                <h3>Y</h3>
                <checker-item value="洋钱罐">洋钱罐</checker-item>
                <checker-item value="翼龙贷">翼龙贷</checker-item>
                <checker-item value="宜贷网">宜贷网</checker-item>
                <checker-item value="银湖网" style="margin:0.2933rem 0">银湖网</checker-item>
                <checker-item value="有利网">有利网</checker-item>
                <checker-item value="友金服">友金服</checker-item>
                <checker-item value="宜人贷">宜人贷</checker-item>

                <h3>Z</h3>
                <checker-item value="珠宝贷">珠宝贷</checker-item>

                <h3>#</h3>
                <checker-item value="51人品">51人品</checker-item>
                <checker-item value="91旺财">91旺财</checker-item>
              </checker>
            </div>
          </div>
              <!-- <checker-item :value="4" style="margin:0.2933rem 0">{{ platformbg[4] }}</checker-item> -->
          <div class="debtFPBtn">
            <span id="platCancle" @click="close">取消</span>
            <span id="platSubmit" @click="submit">确认</span>
          </div>
        </div>
      </popup>
    </div>
</template>
<script>
import { TransferDom,Popup,Checker,CheckerItem } from 'vux'
import {getDebtSearch} from '../../../../service/getData.js'

export default {
  components:{
    Popup,
    Checker,
    CheckerItem
  },
  data(){
    return {
      typeId:0,
      showRight:false
    }
  },
  methods:{
    open(){
      this.showRight = true
    },
    close(){
      this.showRight = false
      this.$emit('close',false)
    },
    submit(){//TODO:修改
    console.log(`${this.typeId}`);
      getDebtSearch(this.typeId)
        .then(res=>{
          // console.log(res);
          if(res.status == 1){
            this.$emit('getDebtFilter',res.list)
            this.showRight = false
            this.typeId = 0
          }
        })
    }
  },
  directives: {
    TransferDom
  },
}
</script>
<style lang="less">
@import '../../../../style/mixin.less';

  #filterPlatformBox{
    box-sizing: border-box;
    height: 100%;
    padding: 0 0.5333rem .4rem 0.53333rem;
    // background-color: springgreen;
    .platformBox{
      margin-top: .25rem;
      .fliterRow1{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 0.2rem;
      }
      .itemBox{
        width: 2.1333rem;
        height: 0.8rem;
        line-height: .8rem;
        text-align: center;
        font-size: .4rem;
        display: inline-block;
        border: 1px solid #eee;
      }
      .active{
        border:1px solid #e2462d;
        color:#e2462d;
      }
    }
    #platCancle{
      display: inline-block;
      width: 2.3467rem;
      height: 1.1733rem;
      line-height: 1.1733rem;
      text-align: center;
      border: 1px solid #a1a1a1;
      border-radius: 2rem;
      font-size: .4rem;
      margin-right: 0.3rem;
    }
    #platSubmit{
      display: inline-block;
      width: 4rem;
      height: 1.1733rem;
      line-height: 1.1733rem;
      text-align: center;
      border: 1px solid #a1a1a1;
      border-radius: 2rem;
      font-size: .4rem;
      background-color: #e2462d;
      color: #fff;
    }
    .debtFPBtn{
      margin-top:.55rem;
      position: fixed;
      bottom: .3rem;
      .bg(#eee)
    }
  }
</style>
